import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class FlowLayoutPage extends StatefulWidget {
  @override
  FlowLayoutPageState createState() => new FlowLayoutPageState();
}

class FlowLayoutPageState extends State<FlowLayoutPage> {
  List list = [
    {"title": "影视特效", "type": 0},
    {"title": "室内设计", "type": 1},
    {"title": "游戏原画", "type": 2},
    {"title": "次时代", "type": 3},
    {"title": "UI设计", "type": 4},
    {"title": "后期合成", "type": 5},
  ];
  int groupValue = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('流式布局单选'),
      ),
      body: GridView.count(
        padding: EdgeInsets.all(15),
        //一行显示几个
        crossAxisCount: 3,
        scrollDirection: Axis.vertical,
        //左右间隔
        crossAxisSpacing: 10.0,
        //上下间隔
        mainAxisSpacing: 15,
        //宽高比
        childAspectRatio: 1 / 0.4,
        shrinkWrap: true,
        children: list.map((e) {
          return listItem(context,e);
        }).toList(),
      ),
    );
  }

  Widget listItem(context, value) {
    var deviceSize = MediaQuery.of(context).size;
    print(value['type']);
    return groupValue == value['type']
        ? ElevatedButton(
            style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.black)),
            onPressed: () {
              print('选中的：$value');
              updateGroupValue(value['type']);
            },
            child: Text(
              value['title'],
              style: TextStyle(color: Colors.white),
            ),
          )
        : OutlinedButton(//第一次选中
            onPressed: () {
              print('第一次选中的$value');
              updateGroupValue(value['type']);
            },
            child: Text(value['title']),
          );
  } //这里是代码的关键比较 当value和groupValue一致的时候则选中 设置选中样式和没选中样式
  
//当点击某一个按钮的时候进行修改 groupValue 的值 默认groupValue值为0
  void updateGroupValue(int v) {
    setState(() {
      groupValue = v;
    });
  }
}
